<template>
	<view style="background: #F0E3CE;min-height: 100vh;"
		:style="{background:'url('+Imgbase+'/new_goodmy_bgc.png)','background-size':'100%',}">
		<view class="padding-top-50 padding-left-40 flex-between">
			<view class="">
				<image class="w-80 h-80" :src="Imgbase + '/new_goodlx_img1.png'" mode="aspectFit" @click="back">
				</image>

				<image class="w-100 h-120 padding-left-25 padding-top-25" :src="Imgbase + '/new_goodjif_img2.png'" @click="gobape"
					mode="aspectFit">
				</image>
			</view>

			<view class="padding-top-95">
				<image class="w-200 h-80" :src="Imgbase + '/new_goodjif_img1.png'" mode="aspectFit">
				</image>
			</view>
		</view>
		
		<view class="padding-left-25 padding-right-25 padding-top-15" style="overflow: hidden;">
			<view class="items_box h-325 radius-15 padding-left-12 padding-right-12" v-for="(item,index) in list"
				:key="index">
				<view class="" style="margin-top: -15rpx;">
					<image class="radius-15 h-250 w-327" :src="item.adimage" mode="aspectFill"
						@click="showGood(item.id)">
					</image>
				</view>
				<view class="flex alc">
					<view class="Afont font-14 quanju text-center margin-top-2 margin-right-5" v-if="item.has_whole == 1">
						全局
					</view>
					<view class="Afont font-22 one-line" style="width: 52%;">
						{{item.name}}
					</view>
					<view class="price Bfont font-24">
						￥{{item.cost}}
					</view>
				</view>
				<view class="jindu margin-top-15 text-center Afont font-16">
					<view class="" style="position: relative;z-index: 10;">
						{{item.count}}/{{item.number}}
					</view>
					<view v-if="item.count<11" class="jin_s"
						:style="[{width:item.count/item.number*100 + '%'}]" style="background-color: #D43A3A;">
					</view>
					<view v-else class="jin_s" :style="[{width:item.count/item.number*100 + '%'}]"
						style="background-color: #2B9C35;">
		
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		name: "goodspoor",
		data() {
			return {
				Imgbase: getApp().globalData.Imgbase,
				refreshtime: 0,
				id: null,
				swiperList: [],
				list: [],
				page: 1,
				count: 0,
				hasData: true,
				keyword: '',
				orderpicker: ['最新发售', '价格升序', '价格降序', '剩余升序', '剩余降序'],
				orderids: [1, 2, 3, 4, 5],
				orderindex: 0,
				orderid: 1,
				loadModal: false,
			};
		},
		onShow() {
			this.Init();
			var _this = this;
			uni.request({
				url: _this.$globals.apibase + '/api/Index/checkCheck',
				data: {},
				method: 'POST',
				header: {
					'content-type': 'application/json'
				},
				success: (res) => {
					if (res.data.data.state == 2) {
						_this.login();
					}
					if (res.data.data.state == 1) {
						uni.setStorageSync('token', '');
						_this.login();
					}
					if (res.data.data.state == 0) {
						uni.setStorageSync('token', res.data.data.token);
					}
				}
			});
		},
		onReachBottom() {
			if (this.hasData) {
				this.page++;
				this.loadlist();
			}
		},
		methods: {
			gobape() {
				uni.switchTab({
					url: '/pages/goodspoor/backpack'
				})
			},
			back() {
				uni.navigateBack()
			},
			orderPickerChange(e) {
				this.orderindex = e.detail.value
				this.orderid = this.orderids[this.orderindex]
				this.page = 1;
				this.list = [];
				this.hasData = true;
				this.loadlist();
			},
			search() {
				this.page = 1;
				this.list = [];
				this.hasData = true;
				this.loadlist();
			},
			startR() {
				if (getApp().globalData.couldFresh == true) {
					getApp().globalData.couldFresh = false;
					setTimeout(() => {
						getApp().globalData.couldFresh = true;
					}, 1000)
				} else {
					/*uni.showToast({
						icon: 'none',
						title: '刷新频率点击太快啦'
					});*/
					return;
				}
				this.refreshtime += 1;
				let _this = this;
				this.page = 1;
				this.list = [];
				this.hasData = true;
				this.loadlist();
				/*uni.request({
					url: _this.$globals.apibase+'/api/Luckgoods/scorepoorrefresh',
					data: {
						token: uni.getStorageSync('token'),
						keyword: _this.keyword,
						orderid:_this.orderid,
						count:_this.list.length,
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if(res.data.code == '401'){
							uni.setStorageSync('token', '');
						}
						if(res.data.code == '1'){
							_this.count = res.data.data.count;
							_this.list = res.data.data.list;
						}
						if(res.data.code == '0'){
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					}
				});*/
			},
			login() {
				if (uni.getStorageSync('token') == '') {
					let _this = this;
					wx.showModal({
						title: '温馨提示',
						content: '正在请求您的个人信息',
						success(res) {
							if (res.confirm) {
								wx.getUserProfile({
									desc: "获取你的昵称、头像、地区及性别",
									success: function(res) {
										uni.showLoading({
											title: '登录中...'
										});
										console.log('getcodebegin');
										console.log(res);
										uni.login({
											provider: 'weixin',
											success: function(loginRes) {
												let code = loginRes.code;
												console.log(code);
												uni.request({
													url: _this.$globals.apibase +
														'/api/Minlogin/login',
													data: {
														code: code,
														avatar: res.userInfo
															.avatarUrl,
														nickname: res.userInfo
															.nickName,
														gender: res.userInfo
															.gender,
														encryptedData: res
															.encryptedData,
														iv: res.iv,
														ver: _this.$mpVer
													},
													method: 'POST',
													header: {
														'content-type': 'application/json'
													},
													success: (res) => {
														console.log(res);
														if (res.data.code ==
															'1') {
															uni.setStorageSync(
																'token',
																res.data
																.data.token
															);
															_this.getuser();
														}
														uni.hideLoading();
													}
												});
											},
										});
									}
								})
							}
						}
					})
				} else {}
			},
			getuser() {
				let _this = this;
				uni.request({
					url: _this.$globals.apibase + '/api/Userways/userFront',
					data: {
						token: uni.getStorageSync('token'),
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if (res.data.code == '1') {
							_this.id = res.data.data.user_desc.id;
						}
					}
				});
			},
			showSwiper(id) {
				console.log(id);
			},
			showGood(id) {
				uni.navigateTo({
					url: `/pagesA/goodspoor/poordetail?id=${id}`
				});
			},
			loadlist() {
				let _this = this;
				_this.loadModal = true;
				uni.request({
					url: _this.$globals.apibase + '/api/Luckgoods/scorepoorlist',
					data: {
						token: uni.getStorageSync('token'),
						page: _this.page,
						keyword: _this.keyword,
						orderid: _this.orderid,
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if (res.data.code == '401') {
							uni.setStorageSync('token', '');
						}
						if (res.data.code == '1') {
							_this.count = res.data.data.count;
							for (let i = 0; i < res.data.data.list.length; i++) {
								_this.list = _this.list.concat(res.data.data.list[i])
							}
							if (_this.list.length >= _this.count) {
								_this.hasData = false
							}
						}
						if (res.data.code == '0') {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
						_this.loadModal = false;
					}
				});
			},
			Init() {
				this.page = 1;
				this.list = [];
				this.hasData = true;
				this.keyword = '';
				this.loadlist();
			},
			savePoor(id, index) {
				let _this = this;
				uni.request({
					url: _this.$globals.apibase + '/api/Luckorder/savePoor',
					data: {
						token: uni.getStorageSync('token'),
						goods_poor_id: id,
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if (res.data.code == '401') {
							uni.setStorageSync('token', '');
							_this.$uniApi.trylogin();
						}
						if (res.data.code == '1') {
							uni.showToast({
								icon: 'success',
								title: '添加收藏成功'
							});
							_this.list[index].liked = 1;
						}
						if (res.data.code == '0') {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					}
				});
			},
			unsavePoor(id, index) {
				let _this = this;
				uni.request({
					url: _this.$globals.apibase + '/api/Luckorder/unsavePoor',
					data: {
						token: uni.getStorageSync('token'),
						goods_poor_id: id,
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if (res.data.code == '401') {
							uni.setStorageSync('token', '');
							_this.$uniApi.trylogin();
						}
						if (res.data.code == '1') {
							uni.showToast({
								icon: 'success',
								title: '取消收藏成功'
							});
							_this.list[index].liked = 0;
						}
						if (res.data.code == '0') {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					}
				});
			},
		},
	}
</script>

<style lang="less" scoped>
	.items_box {
		width: 47%;
		background-color: #F0E3CE;
		box-shadow:
			5px 5px 5px #00000014,
			5px -5px 5px #00000014,
			-5px 5px 5px #00000014,
			-5px -5px 5px #00000014;
		float: left;
		margin-right: 5%;
		margin-bottom: 60rpx;
	
		.quanju {
			color: #ff5555;
			border-radius: 8rpx;
			border: solid 2rpx #ff5555;
			min-width: 45rpx;
			height: 24rpx;
			line-height: 20rpx;
		}
	
		.price {
			color: #e60000;
		}
	
		.jindu {
			width: 314rpx;
			height: 25rpx;
			background-color: #ffffff;
			box-shadow: inset 3rpx 4rpx 18rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 25rpx;
			border: solid 2rpx rgba(255, 255, 255, 0.9);
			position: relative;
			overflow: hidden;
			line-height: 25rpx;
	
			.jin_s {
				position: absolute;
				height: 100%;
				border-radius: 25rpx;
				z-index: 9;
				top: 0;
				left: 0;
				background-color: red;
			}
		}
	}
	
	.items_box:nth-child(2n) {
		margin-right: 0;
	}
	
</style>